/*
*COLmain.css
*------------------------------------------------------------------------
*  Es el CSS principal de la aplicación Colegio
*
*/



html{color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {
       margin:0;
       padding:0;}
table{border-collapse:collapse;border-spacing:1px;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:center;}
/*h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}*/
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}

input,textarea,select{
    font-size:100%;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    
    margin-top: 3px;
    margin-bottom: 3px;
}

input,textarea,select{
    box-shadow: 0px 4px 19px rgba(211, 211, 211,2);
}

legend{color:#000;}
del,ins{text-decoration:none;}


a:hover{
    text-decoration:none;
}


a{
    text-decoration:none;
}


textarea:read-only {
   opacity: .5;
   -moz-opacity: .5;
   filter:alpha(opacity=5);
   background-color:  #e8e8e8;
    }
table tbody * {text-align: left;}    
   
/*
Fonts CSS
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;font-size:small;font:x-small;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;outline: none;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%;}

a
{
  color: black;
  outline: none;
}

body
{
  font: 14px "Lucida Grande", Lucida, Verdana, sans-serif;
  background-color: white;
  width:  100%;
  height: 100%;
  padding: 0px;
  margin: auto;
 
}

#container
{
  margin: auto;
/*  margin-left: auto;
  margin-right: auto;*/
  height: 100%;
  
  /*background: #fff url(../images/bg-page.png) bottom repeat-x;*/
  background-color: #fff;
  overflow: hidden;
}

#header
{
  height: 65px;
  width: 100%;
  margin-left:auto;
  margin-right:auto;
/*  max-width: 1200px;
  min-width: 800px;*/
  overflow: hidden;
  position: fixed;
  border-bottom:  1px solid gray;
  background-color: #000;
  color: #fff;
  z-index: 2;
 
}

#header .content
{
  float: left;
  width: 20%;
  margin: 0 0;
  
  
}
#header .infoContextual
{
  margin: 0px;
  float: left;
  font-size: 100%;
  width: 30%;
}

#header .notificaciones
{
  margin: 3px 0;
  float: left;
  padding: 1%;
  border: none;
  font-size: 80%;
  width: 30%;
  
}

/*#header*/ 
.flash_timedNotice
{
  position: absolute;
  top: 40%;
  left: 40%;
  background-color: #176f94;
  color: #fff;
  margin:  0px 0px;
  float: right;
  padding: 10px;
  border-radius: 10px 0 15px 0;
  font-size: 130%;
/*  width: 30%;*/
  
 
}

#header .version
{
  position: absolute; 
  top:45px;
  right: 0px;
  
/*  padding: 1px;*/
  border: none;
  font-size: 100%;
/*  width: 30%;*/
 
}


#contenido {
    margin-left: auto;
    margin-right: auto;
    margin-top: 65px;
    margin-bottom: auto;
    height: 100%;
    padding: 0% 0%;
    overflow: hidden;

        
}

#contenido .novedades {
  width: 65%; 
  min-height: 300px;
  float: left;
  padding: 1%;
  border: none;
}

#contenido .novedades h1 {
  background-image: none;
  font-size: 124%;
    
}

#contenido .signin h1 {

  font-size: 124%;
  margin-bottom: 15px  
}

#contenido .signin {
    
  width: 25%;
  float: left;
  padding: 10px;
  margin-left: 1%;
  margin-right:  1%;
  margin-top: 2%;
  border: none;
  border-radius: 10px 0 15px 0;
  background: #f1f1f1;
  border: 1px solid #e5e5e5;
  
   
}

#contenido .signin input{
 
  float:right;
}

#contenido .signin th{
 
  text-align:left;
}

#contenido .signin td{
 
  border-bottom: none;
  text-align: center;  
}

#contenido .signin tr {
    height: 45px;
}


 
#contenido .error_list li{
    color: red;
    font-size: 80%;
    list-style:none;    
}

/*----------------------------------
 *  Menu de usuario
 *----------------------------------
 */

 #contenido .menu li{
    margin-bottom: 8px;
    list-style:none;
}

#contenido .menu ul{
    width:8%;
}

#contenido .menu {
  float: left;
  font-size: 100%;
  width: 8%;
  overflow: auto;
  margin-top: 15px;
  padding-left: 15px;
/*  border-right: 1px solid  #176f94;*/
  height: 70%;
  
  
}
 
 /* Efecto sobre el color
        asi como sepia, hay grascale, saturate... buscar*/
 
#contenido .menu #menu-usuario img  {
/*filter: url('#grayscale');  Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 
-webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-ms-filter: grayscale(60%);
-o-filter: grayscale(60%);
filter: grayscale(60%);  Para cuando es estándar funcione en todos 
filter: Gray();  IE4-8 and 9 */

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
   
height: 40px;
/*    opacity:0.4;*/
/*    filter:alpha(opacity=40);  For IE8 and earlier */

}

#contenido .menu #menu-usuario img:hover  { 
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

/*    background-color:  #eee;*/
/*    opacity:1.0;*/
/*    filter:alpha(opacity=100);  For IE8 and earlier     */
    height: 60px;

}



/*----------------------------------
 *  Menu de Configuracion
 *----------------------------------
 */


#contenido .menuCfg {
  overflow: auto;

}



#contenido .menuCfg table{
  margin-top: 10px;
  margin-left: 20px;
  
}


#contenido .menuCfg td{
  height: 150px;
  width: 150px;
  
}

 /* Efecto sobre el color
        asi como sepia, hay grascale, saturate... buscar*/
 
#contenido .menuCfg img  {

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
   
height: 60px;

}

#contenido .menuCfg img:hover  { 
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
    height: 80px;

}


/*----------------------------------
 *  Contenido, cuerpo con toda la data
 *----------------------------------
 */


div#contenido .contenido {
  width: 85%;
  padding-left: 1%;
  padding-top: 1%;
  padding-right: 1%; 
  height: 70%;
  overflow: hidden;
  

}

#contenido .contenido h1
{
  margin-top: 10px;
  margin-bottom: 1px;
  margin-left: 3px;
  padding: 0px 15px;
  line-height: 32px;
  color: darkcyan;
}

#contenido .contenido h1 a
{
  color: #fff;
  text-decoration: none;
  font-style: normal;
  text-transform: uppercase;
  line-height: 32px;
}


#footer {
    width: 100%;
    overflow: hidden;
    background-color: #eee;
    height:  10%;
    margin-top: 1%;
}
.flash_notice
{
  margin: 3px 0;
  padding: 7px;
  background-color: #cfc;
}

.flash_error
{
  margin: 3px 0;
  padding: 7px;
  background-color: #f33;
  color: #fff;
}

.flash_br_error
{
  margin: 3px 0;
  padding: 7px;
  background-color: #e44;
  color: #fff;
}



h3 {
}

td {
	/*border-bottom: 1px solid #CCC;*/
	padding: 0 0.5em;
        height: 20px;

	}
        
td.show {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
        height:20px;
        text-align: left;
        
	}
        
  /***************************
     TABLAS genérico
   ***************************/        
th.show {
        border: none;
	padding: 0 0.5em;
	text-align: left;
        height:20px;
   
	}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
            
        }

tbody * {
     

        }
td+td {
	/*border-left: 1px solid #CCC;*/
	text-align: left;
        overflow: hidden;
        
	}
td h2{

     }
     

/***************************
   listaRelacion
   
 ***************************/


.listaRelacion {
    
  padding: 1px;
  
  
     /*Estas dos lineas son claves. Hacen que
      *  el contenido del div no quede fuera del div contenedor (ordenHeader)
      */
  border: 0px solid #000;
  overflow: hidden;
  background: #E0F0FF;
/*  #F8E1D1;*/
}
        /*----- lista*/
.listaRelacion .lista{
  overflow:  hidden;  
  float:left;
  width: 55%;
  margin-left: 10px;
}


table.listaRelacion {
	font:  12px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse:  collapse;
	width: 100%;
        cellspacing: 1px;
 
	}
table.listaRelacion tr {
        font:  14px Verdana, Arial, Helvetica, sans-serif;
    	border: none;
        border-top: 1px solid #176f94;
}

table.listaRelacion tr:hover {
        background-color:  #eee;
}

        
table.listaRelacion thead td  {
    	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0 0.5em;
	text-align: left;
        height:20px;
        font-weight: bold;
	}
        
table.listaRelacion td  {
    	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0 0.5em;
	text-align: left;
        height:20px;
   
	}        
     
        /*----- Finder*/

.listaRelacion .finder{
  overflow:  auto;  
  float:left;
  width: 39%;
  border-radius: 5px 5px 0px 0px;
  border:  #CCC solid 1px;  
  padding: 1px 1px 10px 1px;
  margin: 0px 10px 10px 10px;
}     

.listaRelacion .finder table th{
  text-align: left;
}     


            /* tools de los finders*/
.finder table.tools td:hover {
    background-color: #eee;
}     
   /***************************
     colForm genérico
   ***************************/
   
.datos {
  overflow: hidden;
  padding: 15px;
  /*float: left;*/
  width: 90%;
  border-radius: 15px 0px 15px 0px;
  border: #CCC solid 1px;
  margin-left: auto;
  margin-right: auto;    
  
  
}

.colFormHeader{
    
/*    margin-left: auto;
    margin-right: auto;    */
}

.colFormHeader td{
    


}
.colFormHeader th{
 
 
}



.colFormHeader tr:hover{
    
  background-color: #eee;
}


.colFormHeader tr {
         height: auto;
	}        
        
.colFormHeader th {
 	
	text-align: left;
        height:20px;
        width: 30%;
   
	}
 
.colFormHeader td {
	/*border-bottom: 1px solid #CCC;*/
	padding: 0 0.5em;
        height:20px;
        text-align: left;
	border-bottom: 1px solid  #DDD;        
        
	}
        
.colFormHeader thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
            
        }
.colFormHeader thead * {
	width: 190px;
	background: #CCC;
        
	}

        
.colFormHeader h2{

       }        
        
.colFormHeader tbody * {
        /*font-size: 95%;*/
/*        height:10px;*/
        
          

        }
        
.disable * {
    
}

button.likeLink{
 background: transparent;
 border: none;
 cursor: pointer;
}

table.tools tr td {

    padding: 2px;
}
table.tools tr td:hover {
    background-color: #eee;
    padding: 2px;
}



input, select, textArea{
  border-radius: 4px;
  border:  #CCC solid 2px;    
    
}


input:focus,select:focus,textArea:focus{
    
  border-radius: 4px;
  border:   dodgerblue solid 2px;
    
}



.pedidos {
    
    margin-bottom: 20px;
    font-size:11px;    
    width: 100%;
}


.pedidos th {
    
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border:  #CCC solid 1px;
    background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
    border: 1px solid #D3D3D3;
    color: #555555;
    text-align: center;
    font-size:14px;   
    font-weight: bold;    
}

.pedidos th arriba{
    float:left;
    
}

.pedidos th abajo{
    float:right;
}



.pedidos td {
    
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    border:  #CCC solid 1px;
    font-size:13px;        
}

.pedidos .ordenTools td {
    
    border: none;
     
}

div.sinPermiso div.imagen{

    text-align: center;
} 

div.sinPermiso div.texto{

    text-align: center;
    
}

#ui-accordion-accordion-panel-0{
    padding: 5px;
    overflow:hidden;
    border-radius: 0 0 15px 0;
}

#ui-accordion-accordion-header-0 {
  border-radius: 15px 0px 0px 0px;      
}

  /***************************
     MENSAJES
   ***************************/        
table.mensajes{
    width: 100%;
    font-size: 0.7em;    

}  

.mensajes th {
        border-bottom: 1px solid #CCCCCC;    
	padding: 0 0.5em;
	text-align: left;
        height:20px;
        background-color: #FFF;
	}


.mensajes tbody * {
        font-size: 100%;
        text-align: left;
     
/*        height:10px;*/
        
        }
.mensajes tr{
        /*border-left: 1px solid #CCCCCC;*/
	text-align: left;
        overflow: hidden;
        background-color: #FFF;
        border-bottom: 1px solid #CCC ;
	}
        
.mensajes tr.leidos {
        /*border-left: 1px solid #CCCCCC;*/
	text-align: left;
        overflow: hidden;
        background-color: #F2F2F2;
        border-bottom: 1px solid #CCC ;
	}

.mensajes tr.sinLeer {
        /*border-left: 1px solid #CCCCCC;*/
	text-align: left;
        overflow: hidden;
        background-color: #FFF;
        border-bottom: 1px solid  #EEE;
        font-weight: bolder;
	}
        
.mensajes tr.envieYo {
        /*border-left: 1px solid #CCCCCC;*/
	text-align: left;
        overflow: hidden;
        background-color: #E0F0FF;
        border-bottom: 1px solid  #41B5EA;
	}
        
.mensajes td {
        /*border-left: 1px solid #CCCCCC;*/
	text-align: left;
        overflow: hidden;
        padding-top: 5px;
        padding-bottom:5px;
        

}

.mensajes td.fecha {
        /*border-left: 1px solid #CCCCCC;*/
        width: 15%;
	text-align: left;
        overflow: hidden;
	}

.mensajes td.remitente {
        /*border-left: 1px solid #CCCCCC;*/
        width: 5%;
	text-align: left;
        overflow: hidden;
	}
        
.mensajes td.sinLeer {
        /*border-left: 1px solid #CCCCCC;*/
        width: 5%;
	text-align: left;
        overflow: hidden;
	}
        
.mensajes td.texto {
        /*border-left: 1px solid #CCCCCC;*/
        width: 60%;
	text-align: left;
        overflow: hidden;
	}
        
#divFormMensajeNuevo {
        width: 700px;
        padding: 10px;
        margin-left: 1%;
        margin-right:  1%;
        margin-top: 2%;
        border: none;
        border-radius: 0px 0 15px 0;
        background: #f1f1f1;
        border: 1px solid #e5e5e5;
        margin-bottom: 10px;

}

#divMensajeChat {
        width: 700px;
        padding: 10px;
        margin-left: 1%;
        margin-right:  1%;
        margin-top: 2%;
        border: none;
        border-radius: 10px 0 15px 0;
        background: #f1f1f1;
        border: 1px solid #e5e5e5;
        overflow-y: scroll;
        height: 300px;
}


#mensajePara {
    
        margin-bottom: 5px;
        float: left;
}

#textoMensaje {
    
        margin-bottom: 5px;
}

.formMensajeNuevo {
    
        margin-left: auto;
        margin-right: auto;
}


form th{
    
        font-weight: bold;    
}
/*.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_2e83ff_256x240.png");
}*/
.color0P{
    background:rgb(228, 48, 32);   
}

.color10P{
    background:rgb(228, 103, 32);   
}

.color20P{
    background:rgb(228, 140, 7);   
}

.color30P{
    background:rgb(230, 196, 22);
}

.color40P{
    background:rgb(221, 221, 17);    
}

.color50P{
    background:rgb(167, 224, 18);
}

.color60P{
    background:rgb(139, 214, 26);
}

.color70P{
    background:rgb(136, 206, 111);
}

.color80P{
    background:rgb(130, 196, 105);
}

.color90P{
    background:#73B65A; 
}

.color99P{
    background:#73A05A; 
}

.color100P{
    background:rgb(25, 158, 68);
}
